<template>
  <div class="home">
    <!-- <div id="container"></div>  -->
    <van-nav-bar :fixed="true" :placeholder="true">
      <template #left>
        <router-link to="/home/city">
          <p class="city" style="color: black">
            {{ cityText }}
          </p>
        </router-link>
      </template>
     <template #title>
    <router-link to="/home/detail">
      <van-search
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
        disabled
    /> </router-link></template>  </van-nav-bar>
    
        <!-- </template> -->
    <van-swipe indicator-color="#000" class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="item in homeInfo.banner" :key="item.id">
        <img class="img" :src="item.image_url" alt="" />
      </van-swipe-item>
    </van-swipe>

    <ul class="c-list">
      <li class="c-list-item" v-for="item in homeInfo.channel" :key="item.id">
        <router-link
          :to="{ path: 'category/categorylist', query: { id: item.id } }"
        >
          <div>
            <img :src="item.icon_url" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </router-link>
      </li>
    </ul>
    <div class="first-title">品牌制造商直供</div>
    <ul class="b-list">
      <router-link
        :to="{ path: '/home/brand', query: { id: item.id } }"
        class="b-list-item"
        v-for="item in homeInfo.brandList"
        :key="item.id"
      >
        <div>
          <img :src="item.new_pic_url" alt="" />
          <div class="desc">
            <p class="name">{{ item.name }}</p>
            <div class="price">{{ item.floor_price }}元起</div>
          </div>
        </div>
      </router-link>
    </ul>
    <router-link to="/home/newgoods/1">
      <div class="new">
        <div class="new-desc">
          <p>新品首发</p>
          <button>查看全部</button>
        </div>
      </div>
    </router-link>

    <ul class="new-list">
      <router-link
        tag="li"
        :to="{ path: '/category/detail', query: { id: item.id } }"
        class="new-list-item"
        v-for="item in homeInfo.newGoods"
        :key="item.id"
      >
        <div>
          <img :src="item.list_pic_url" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="brief">{{ item.goods_brief }}</p>
          <div class="price">{{ item.retail_price }}元起</div>
        </div>
      </router-link>
    </ul>
 <router-link to="/home/newgoods/2">
    <div class="hot">
      <div class="hot-desc">
        <p>人气推荐</p>
        <span></span>
        <p>好物精选</p>
        <br />
        <button>查看全部</button>
      </div>
    </div>
    </router-link>
    <ul class="hot-list">
      <router-link
        tag="li"
        :to="{ path: '/category/detail', query: { id: item.id } }"
        class="hot-list-item"
        v-for="item in homeInfo.hotGoods"
        :key="item.id"
      >
        <div>
          <img :src="item.list_pic_url" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="brief">{{ item.goods_brief }}</p>
          <div class="price">{{ item.retail_price }}元起</div>
        </div>
      </router-link>
    </ul>
    <div class="topic">
      <p>专题精选</p>
      <!-- <span>
        <img src="public\images\icon_go_more.png" alt="" />
      </span> -->
      <ul class="topic-list">
        <li v-for="item in homeInfo.topicList" :key="item.id">
          <div class="desc">
            <img :src="item.item_pic_url" alt="" />
            <div class="left">
              <div class="top">
                <p class="title">{{ item.title }}</p>
                <p class="subtitle">{{ item.subtitle }}</p>
              </div>
              <div class="price">{{ item.price_info }}元起</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="newCategoryList">
      <p class="newCategoryList-top"></p>
      <div v-for="item in homeInfo.newCategoryList" :key="item.id">
        <p>{{ item.name }}好物</p>
        <div @click="goDetail">
          <van-grid :border="false" :column-num="2" :gutter="8">
            <router-link
              tag="van-grid-item"
              :to="{ path: '/category/detail', query: { id: item.id } }"
              v-for="item in item.goodsList"
              :key="item.id"
            >
              <van-image :src="item.list_pic_url" />
              <p>{{ item.name }}</p>
              <p class="price">￥{{ item.retail_price }}</p>
            </router-link>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/home";
export default {
  data() {
    return {
      value: "",
      homeInfo: {},
      homeChannel: {},
      brandList: {},
      newGoods: {},
      hotGoods: {},
      topicList: {},
      item: {},
       cityText: ''
    };
  },
  computed: {},
  created() {
    index().then((res) => {
      // console.log(res);
      this.homeInfo = res;
    });
  },
  mounted() {
    var _this = this
    if (this.$store.state.cityInfo.name) {
      // console.log(1)
      _this.cityText = this.$store.state.cityInfo.name
      return
    }
    AMap.plugin("AMap.CitySearch", function () {
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        if (status === "complete" && result.info === "OK") {
          // console.log(result);
           _this.cityText = result.city
           console.log( _this.cityText);
        }
      });
    });
    // var map = new AMap.Map('container');
    // var position = new AMap.LngLat(116, 39);
    // map.setCenter(position);
    // var currentCenter = map.getCenter();
    // map.setZoom(13);
    // var currentZoom = map.getZoom();
    // map.setZoomAndCenter(14, [116.205467, 39.907761]);
  },
  methods: {
    goDetail() {
      this.$router.push({ path: "/category/detail", query: { id: item.id } });
    },
  },
};
</script>

<style  lang="scss" scoped>
$color: #9c3232;
// #container {
//   width: 300px;
//   height: 180px;
// }
// ::v-deep p{
//     color: red;
// }
.city {
  width: 50px;
}
.van-search__content {
  background-color: white;
}
.van-search {
  width: 350px;
  height: 46px;
  margin-right: 10px;
}
.home {
  overflow: auto;
  // background-color:"#ccc";
  .img {
    width: 100%;
  }
  ::v-deep .van-swipe__indicator {
    background-color: red;
  }
}
.first-title {
  margin-top: 0.5rem;
  font-size: 18px;
}
.c-list {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.26667rem 0;
  background: #fff;
}
.c-list-item {
  width: 20%;
  font-size: 12px;
  img {
    height: 0.77333rem;
    width: 0.77333rem;
    display: inline-block;
  }
}
.b-list {
  margin-top: 0.26667rem;
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  .b-list-item {
    position: relative;
    width: 50%;

    img {
      display: block;
      width: 178px;
      height: 116px;
    }
    .desc {
      position: absolute;
      font-size: 0.32rem;
      color: #938080;
      top: 0.625em;
      left: 0.625em;
      text-align: left;
    }
  }
}
.first-title {
  text-align: center;
  padding: 0.53333rem 0;
}
.new {
  width: 100%;
  margin: 5px 0;
  //   height: 7.625em;
  background-color: #eef5fc;
  .new-desc {
    //    margin-top: 48px;
    text-align: center;
    p {
      padding-top: 48px;
      color: #b1a279;
      font-size: 0.42667rem;
    }
    button {
      color: #8c9bae;
      background: #f4e9cb;
      border: none;
      width: 2.4rem;
      height: 0.66667rem;
      // line-height: .66667rem;
      margin: 0 auto 0.625rem;
      font-size: 0.29333rem;
      background: #d8e4f0;
    }
  }
}
// ::v-deep
.new-list {
  margin: 5px 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 1.25rem;

  .new-list-item {
    img {
      width: 3.73333rem;
      height: 3.73333rem;
    }
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.4rem;
      font-weight: 700;
    }
    .brief {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #8a8a8a;
      font-size: 0.32rem;
    }
    .price {
      color: #9c3232;
      font-size: 0.32rem;
    }
  }
}

.hot {
  width: 100%;
  display: flex;
  justify-content: center;
  // height: 7.625em;
  background-color: #f4e9cb;
  font-size: 0.42667rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .hot-desc {
    align-items: center;
    // width: 100%;
    //   width: 200px;
    text-align: center;
    span {
      width: 0.05333rem;
      height: 0.05333rem;
      font-size: 0.18667rem;
      display: inline-block;
      //   vertical-align: middle;
      background: #b1a279;
      text-align: center;
    }
    // .p {
    //     padding-top:48px ;
    //   color: #b1a279;
    //   font-size: 0.42667rem;

    // }
    button {
      color: #f4e9cb;
      border: none;
      font-size: 2.4rem;
      //   vertical-align: middle;
      border: none;
      width: 2.4rem;
      height: 0.66667rem;
      // line-height: .66667rem;
      margin: 0 auto 0.625rem;
      font-size: 0.29333rem;
      color: #d8e4f0;
    }
  }
}
.hot-list {
  //   margin: 5px 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 0.625rem;

  .hot-list-item {
    img {
      width: 3.73333rem;
      height: 3.73333rem;
    }
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.4rem;
      font-weight: 700;
    }
    .brief {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #8a8a8a;
      font-size: 0.32rem;
    }
    .price {
      color: #9c3232;
      font-size: 0.32rem;
    }
  }
}
.topic {
  width: 100%;
  margin-top: 20px;
  margin: 0.9375rem auto;
  background-color: #fff;
}
.topic-list {
  // margin: 0.3125rem 0;
  // display: flex;
  width: 100%;
  // justify-content: center;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-left: 0.33333rem;
  .desc {
    margin-left: 0.33333rem;
    // display: flex;
    // justify-content: center;
    // margin-left: 0.75rem;
    // width: 17.9375rem;
    img {
      display: block;
      width: 7.66667rem;
      height: 4.33333rem;
      border-radius: 0.13333rem;
    }
    .left {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .top {
        .title {
          margin-top: 0.10667rem;
          font-size: 0.4rem;
          font-weight: 700;
        }
        .subtitile {
          color: #8a8a8a;
          font-size: 0.32rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 90%;
        }
      }
      .price {
        margin-top: 0.10667rem;
        color: #9c3232;
        font-size: 0.32rem;
      }
    }
  }
}
.newCategoryList {
  .price {
    color: $color;
  }
}
</style>
